<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>西瓜用户首页</title>
<link type="text/css" href="css/user_home_cart.css" rel="stylesheet" />
<link type="text/css" href="css/common.css" rel="stylesheet" />
<link type="text/css" href="css/reset.css" rel="stylesheet" />
<link type="text/css" href="css/esc.css" rel="stylesheet" />
    <link type="text/css" href="theme-chalk/index.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><!--必须得放在第一的位置-->
<!--    <script type="text/javascript" src="js/user_home_cart.js"></script>-->
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/esc.js"></script>
    <script src="js/element-ui-index.js"></script>

</head>

<body>
<div id="app">
<div class="index">
  <myframe>
  <div class="user_content f_f width_1200_center">
    <div class="content_position">您当前的位置：<a href="javascript:">首页</a><span>&gt;</span><a href="javascript:">用户主页</a></div>
   <!-- <div class="user_content_top f_z15"><a href="#">注册会员</a><span>Register</span></div>-->
    <div class="hr_10"></div>
    <div class="user_content_con over_hidden width_1200_center"><!--over_hidden也是清除浮动的一种-->
      <div class="user_content_con_nav fl">
          <div class="nav_info">
              <h1>个人信息</h1>
              <ul>
                  <li><div class=""><a :href="'user_home.html?uid='+user.uid">个人资料</a></div></li>
                  <li><a :href="'user_home_info.html?uid='+user.uid">修改个人资料</a></li>
                  <li><a href="user_home_address.html">收货地址</a></li>
              </ul>
          </div>
          <div class="nav_goods">
              <h1>商品管理</h1>
              <ul>
                  <li><a href="user_home_order.html">我的订单</a></li>
                  <li><a href="user_home_favorite.html">我的收藏</a></li>
                  <li><div class="djbs"><a href="user_home_cart.html">我的购物车</a></div></li>
                  <li><a href="#">卖车中心</a></li>
              </ul>
          </div>
          <div class="nav_comments_opinion">
              <h1>评论意见</h1>
              <ul>
                  <li><a href="user_home_comment.html">我的评论</a></li>
                  <li><a href="user_home_idea.html">我的意见</a></li>
                  <li><a href="user_home_message.html">西瓜消息</a></li>
              </ul>
          </div>
      </div>
      <!--右侧购物车-->
      <div class="user_content_con_c position_re fr">
        <div class="content_goods_cart f_f width_1000_center">
          <div class="content_goods_cart_top over_hidden width_1000_center">
            <div class="top_cart fl"><h1>我的购物车</h1></div>
            <div class="top_all fr"><span class="span1">西瓜店-全部商品</span><span class="span2">{{carList.length}}</span></div>
          </div>
          <div class="content_goods_cart_con width_1000_center clearfix">
            <div class="content_goods_cart_con_top">
              <div class="con_check fl"><input class="check_all" type="checkbox" id="con_check1"/><span><label for="con_check1">全选</label></span></div>
              <div class="con_goods fl">商品</div>
              <div class="con_action fr">操作</div>
              <div class="con_pricea fr">小计（元）</div>
              <div class="con_num fr">数量</div>
              <div class="con_priceb fr">单价（元）</div>
            </div>
            <div class="hr_5"></div>
            <div class="content_goods_message_con_check"><input class="check_revsern" name="check_revsern" type="checkbox" id="con_check2"/><span><label for="con_check2">反选</label></span><a href="javascript:void(0)">批量移入我的收藏</a><a href="javascript:void(0)">批量删除</a></div>

             <div v-for="i,index in carList">

              <div class="content_goods_cart_con_con ">
                <div class="con_check1 fl">
                    <input class="check_one" name="items" type="checkbox" v-model="orderCarAllId " :value="i.carId"/>
                </div>
                <div class="con_goods1 fl clearfix">
                  <div class="pic fl"><img :src="i.image" width="110" height="80"/></div>
                 <div class="details fl"><a href="javascript:void(0)">{{i.carName}}<span class="">{{i.date}}</span><em class="shuxian">|</em>{{i.traveled}}</a></div>
                </div>
               <div class="con_action1 fr">
                  <div @click.prevent="op(index)" class="delete"><a href="javascript:void(0)">删除</a></div>
                  <div class="move_coll"><a href="javascript:void(0)">移入我的收藏</a></div>
               </div>
                <div class="con_pricea1 fr">{{i.oldPrice}}万元</div>
                <div class="con_num1 fr">
                 <div class="left fl"><a @click="sub(index)" href="javascript:void(0)">-</a></div>
                 <div  class="center fl"><input v-model="carOrder[index].number" class="center1 change_car_va" type="text" /></div>
                  <div  class="right change_car fl"><a @click="add(index)" href="javascript:void(0)">+</a></div>
                </div>
                <div class="con_priceb1 fr">{{i.oldPrice}}万元</div>
              </div>
               <div class="hr_10"></div>


             </div>

            <div class="content_goods_cart_con_money width_1000_center">
              <div class="money_check fl"><a href="javascript:void(0)">
                  <input class="check_all_va" name="" type="checkbox" id="money_check"/>
                  <label for="money_check">全选</label></a><a href="javascript:void(0)" class="money_check1">
                  <input class="check_revsern_va" name="check_revsern" type="checkbox" id="money_check1"/>
                  <label for="money_check1">反选</label></a><a href="javascript:void(0)">移入收藏夹</a>
                  <a @click="deleteOrderAll" href="javascript:void(0)">删除选中商品</a><a href="javascript:void(0)">删除下架商品</a>
              </div>
              <div class="money_pay fr"><a href="javascript:void(0)">结&nbsp;算</a></div>
              <div class="money_already">已选商品<span class="span1">{{orderCarAllId .length}}</span>件&nbsp;&nbsp;&nbsp;合计(不含运费):<span class="span2">￥{{totalPrice}}万</span>&nbsp;&nbsp;</div>
            </div>
            
          </div>
        </div>        
      </div><!--右侧购物车完-->
    </div><!--左右侧完-->
    <!--以后复制的开始--> 
    <div class="hr_10"></div>
    <div class="buy_content_li width_1200_center">
      <div class="buy_content_li_top clearfix">
        <div class="buy_content_li_top_default fl"><a href="#">西瓜推荐</a></div>
        <div class="buy_content_li_top_num fr"><a href="#">共12辆车</a></div>
      </div>
      <div class="hr_5"></div>
      <div class="buy_content_li_list over_hidden clearfix">

          <div v-for="c in cars">
              <div class="index_content_con_margin_l"><!--只用来向右移动的，这样才不会有一个因为父级宽度不够出现在下方-->
                  <div class="index_content_con_c'+i+' index_content_con_c width_h_292_276 over_hidden fl"><!--只用来设置内边距--><!--用来设置外右边距-->
                      <div class="index_content_con_cc width_h_292_276">
                          <div class="index_content_con_pic width_h_292_186">
                              <a :href="'buy_details.html?carId='+c.carId"><img :src="c.image" width="292" height="186" /></a>
                          </div>
                          <div class="index_content_con_txt width_h_292_90">
                              <p class="p1">
                                  <a title="" href="#">{{c.carName}}</a>
                              </p>
                              <p class="p2">
                                  <span class="">{{c.date}}上牌</span><em class="shuxian">|</em>行驶{{c.traveled}}万公里
                              </p>
                              <p class="p3">
                                  <span><i class="fc-org priType">{{c.oldPrice}}万</i></span><s>{{c.newPrice}}万</s>
                              </p>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
<!--      </div>&lt;!&ndash;遍历内容部分完&ndash;&gt;-->
<!--    </div>&lt;!&ndash;整个遍历内容部分完&ndash;&gt;-->
<!--    &lt;!&ndash;以后复制的结束&ndash;&gt;   -->
  </div><!--整个内容部分-->
    </div>
  </div>
  
 
 
 
 
 
  <div class="hr_8"></div>
  </myframe>
</div>
</div>

<script>
    var v = new Vue({
        el : "#app",
        data : {
            carList : [],
            carOrder : [],
            user : [],
            totalPrice : "",
            checked :"false",
            orderCarAllId  : [],
            cars : []
        },
        created(){
            this.getLoginedUser();
            this.queryTuijian();
        },
        // vue属性监听器
        watch:{
            orderCarAllId(newValue, oldValue){
                this.seleteOrder();
            }
        },
        methods : {

            //获取用户信息
            getLoginedUser() {
                axios.get("/esc-user/getLoginedUser").then(res => {
                    if (res.data.code) {
                        console.log(res.data.data);
                        this.user = res.data.data;
                        this.queryCar();
                        this.carOrderAll();

                    }
                })
            },
            //通过用户id查出订单表信息
            carOrderAll() {
                var p = new URLSearchParams();
                p.append("uid", this.user.uid);
                axios.post("/esc-order/esc/order/carOrderAll", p).then(res=>{
                    this.carOrder = res.data.data;
                    console.log(this.carOrder);
                })
            },

            //计算购物车价格
            seleteOrder() {
                //
                this.totalPrice = 0;
                console.log("==========");
                this.orderCarAllId.forEach(o=>{
                    this.carOrder.forEach(c=>{
                        console.info("====", o,c);
                        if(o ==  c.carId) {
                           
                            this.totalPrice += c.price * c.number;
                        }

                    })

                })



            },
            add(index) {
                this.carOrder[index].number++;
                this.seleteOrder();
            },
            sub(index) {
                this.carOrder[index].number--;
                this.seleteOrder();
            },
            // 查询购物车的车辆列表
            queryCar() {
                // let that = this;
                var p = new URLSearchParams();
                p.append("uid", this.user.uid);
                console.log(this.user.uid);
                axios.post("/esc-order/esc/order/queryCar", p).then(res=>{
                    console.log(p);
                    this.carList = res.data.data;
                    var reg = /upload/
                    for(var a of  this.carList ){
                        if (a.image.match(reg)){
                            a.image = "/esc-user" + a.image;
                        }
                    }
                    console.log(this.carList);
                })
            },
            // 删除购物车列表车辆
            deleteOrder(index) {
                var p = new URLSearchParams();
                p.append("oid", this.carOrder[index].oid);
                axios.post("/esc-order/esc/order/deleteOrder",p).then(res=>{
                    if(res.data.code == 1) {

                        this.queryCar();
                    }
                })
            },
            //全删
            deleteOrderAll() {
                var p = new URLSearchParams();
                p.append("carIdAll", this.orderCarAllId );
                axios.post("/esc-order/esc/order/deleteOrderAll",p).then(res=>{
                    if(res.data.code == 1) {
                        alert(res.data.msg);
                    }
                })
            },
            queryTuijian(){
                axios.get("/esc-order/esc/carMessage/queryCar").then(res=>{
                    this.cars = res.data;
                    var reg = /upload/
                    for(var a of  this.cars ){
                        if (a.image.match(reg)){
                            a.image = "/esc-user" + a.image;
                        }
                    }
                })
            },
            op(index) {
                this.$confirm('是否要将该车辆从列表中删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.deleteOrder(index)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        }
    })
</script>

</body>
</html>